<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../../../../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="../../../../css/common.css" />
	<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
	<div class="mui-content">
		<div class="banner-content">
			<div class="search-box">
				<span class="mui-icon mui-icon-search"></span>
				<input type="text" name="" οnsearch="goGoodsList()" id="search" value="" placeholder="请搜索商品名称或编号" />
				<img src="../../../../images/home/icon_common_delete.png" id="delete" class="icon_common_delete" hidden>
			</div>
			<div class="cancell-text" id="cancel">
				取消
			</div>
		</div>
		<div class="tab-list">
			<div tabid='1' class="tab-list-item tab-active">
				综合
			</div>
			<div tabid='2' class="tab-list-item">
				销量
			</div>
			<div tabid='3' class="tab-list-item">
				最新
			</div>
			<div tabid='4' class="tab-list-item ">
				<div class="tab-price-item">
					<span>价格</span>
					<div class="tab-price">
						<img id="arrow_default" src="../../../../images/home/icon_commoditylist_price_arrow_default.png"
							class="price_arrow">
						<img id="arrow_up" src="../../../../images/home/icon_commoditylist_price_arrow_up.png" class="price_arrow"
							hidden>
						<img id="arrow_down" src="../../../../images/home/icon_commoditylist_price_arrow_down.png" class="price_arrow"
							hidden>
					</div>
				</div>

			</div>
			<div class="last-item">
				<img id="list_water" src="../../../../images/home/icon_commoditylist_waterfallflow.png"
					class="icon_commoditylist">
				<img hidden id="listflow" src="../../../../images/home/icon_commoditylist_listflow.png"
					class="icon_commoditylist">
			</div>
		</div>
		<!-- 默认瀑布流 -->
		<div id="list_water-list" class="default-list">
			<div class="default-list-item">
				<img src="../../../../images/home/demo.jpg" class="goods-img">
				<div class="goods-title" style="padding: 0 0.375rem;">
					标题长度最多展示两行超
					出两行部分显示省略号555555
				</div>
				<div class="goods-info" style="padding: 0 0.375rem 0.375rem;">
					<div class="price">
						<span>￥</span><span class="price-num">90.00</span>
					</div>
					<div class="goods-code">
						编号：<span class="code">1102</span>
					</div>
				</div>
			</div>
			<div class="default-list-item">
				<img src="../../../../images/home/demo.jpg" class="goods-img">
				<div class="goods-title" style="padding: 0 0.375rem;">
					标题长度最多展示两行超

				</div>
				<div class="goods-info" style="padding: 0 0.375rem 0.375rem;">
					<div class="price">
						<span>￥</span><span class="price-num">90.00</span>
					</div>
					<div class="goods-code">
						编号：<span class="code">1102</span>
					</div>
				</div>
			</div>
			<div class="default-list-item">
				<img src="../../../../images/home/demo.jpg" class="goods-img">
				<div class="goods-title" style="padding: 0 0.375rem;">
					标题长度最多展示两行

				</div>
				<div class="goods-info" style="padding: 0 0.375rem 0.375rem;">
					<div class="price">
						<span>￥</span><span class="price-num">90.00</span>
					</div>
					<div class="goods-code">
						编号：<span class="code">1102</span>
					</div>
				</div>
			</div>
			<div class="default-list-item">
				<img src="../../../../images/home/demo.jpg" class="goods-img">
				<div class="goods-title" style="padding: 0 0.375rem;">
					标题长度最多展示两行超
					出两行部分显示省略号555555
				</div>
				<div class="goods-info" style="padding: 0 0.375rem 0.375rem;">
					<div class="price">
						<span>￥</span><span class="price-num">90.00</span>
					</div>
					<div class="goods-code">
						编号：<span class="code">1102</span>
					</div>
				</div>
			</div>
		</div>
		<!-- 每行展示 -->
		<div id="listflow-list" class="recommend-list" hidden>
			<div class="recommend-list-item">
				<img src="../../../../images/home/demo.jpg" class="recommend-img">
				<div class="recommend-info">
					<div class="goods-info">
						<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL 今日下单即赠新品...</span>
						<span class="goods-code">编号:1234</span>
					</div>
					<span class="goods-price">￥<span class="fuhao">69.80</span></span>
				</div>
			</div>
			<div class="recommend-list-item">
				<img src="../../../../images/home/demo.jpg" class="recommend-img">
				<div class="recommend-info">
					<div class="goods-info">
						<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL 今日下单即赠新品...</span>
						<span class="goods-code">编号:1234</span>
					</div>
					
					<span class="goods-price">￥<span class="fuhao">69.80</span></span>
				</div>
			</div>
		</div>
	</div>
	<script src="../../../../js/mui.min.js"></script>
	<script src="../../../../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../../js/getUrlQuery.js"></script>
	<script src="../../../../js/resize.js"></script>
	<script type="text/javascript">
		mui.init()
		$(function ($) {
			// 文档一加载就执行
			$(document).ready(function() {
				obj.setRem()
			})
			// 窗口调节
			$(window).resize(function() {
				obj.setRem()
			});
			// getRequest 获取参数 判断是否为品牌页面进入的则隐藏顶部搜索导航栏
			let query = getRequest();
			console.log(query.brand);
			if(query.brand==='1'){
				$('.banner-content').hide();
			}
			// 返回上级页面
			$('#cancel').click(function () {
				console.log('返回')
				window.history.back()
			})
			// 搜索
			function search() {
				console.log('搜索')
			}
			// 删除小标显示隐藏
			$('#search').bind('input propertychange', function () {
				if ($('#search').val()) {
					$('#delete').show();
				} else {
					$('#delete').hide();
				}
			});
			// 点击删除小标
			$('#delete').click(function () {
				$('#search').val('');
				$('#delete').hide();
			})
			// tab切换
			$(".tab-list-item").click(function () {

				// 修改tab标签样式
				$(this).attr("class", "tab-list-item tab-active")

				$(this).siblings('.tab-list-item').attr("class", "tab-list-item")

				// 获取tab ID
				var itemId = $(this).attr("tabid") - 1;
				console.log(itemId);
				// 切换到指定tab  改变数据

			})
			// 切换列表展示方式
			// 切列表
			$('#list_water').click(function () {
				$(this).hide();
				$('#listflow').show();
				$('#list_water-list').hide();
				$('#listflow-list').show();
			})
			// 切瀑布流
			$('#listflow').click(function () {
				$(this).hide();
				$('#list_water').show();
				$('#listflow-list').hide();
				$('#list_water-list').show();
			})
			// 跳转详情
			function goDetail() {
				window.location.href = '../goodsDetail/index.html';
			}
			$('.default-list-item').click(goDetail);
			$('.recommend-list-item').click(goDetail);
		});
	</script>
</body>

</html>